/**
 * 全局通用样式
 * 引入变量和混入
 */
@import './variables.scss';
@import './mixins.scss';

/* ========== 通用工具类 ========== */
// 间距
.mt-xs { margin-top: $spacing-xs; }
.mt-sm { margin-top: $spacing-sm; }
.mt-md { margin-top: $spacing-md; }
.mt-lg { margin-top: $spacing-lg; }
.mt-xl { margin-top: $spacing-xl; }

.mb-xs { margin-bottom: $spacing-xs; }
.mb-sm { margin-bottom: $spacing-sm; }
.mb-md { margin-bottom: $spacing-md; }
.mb-lg { margin-bottom: $spacing-lg; }
.mb-xl { margin-bottom: $spacing-xl; }

.pt-xs { padding-top: $spacing-xs; }
.pt-sm { padding-top: $spacing-sm; }
.pt-md { padding-top: $spacing-md; }
.pt-lg { padding-top: $spacing-lg; }
.pt-xl { padding-top: $spacing-xl; }

.pb-xs { padding-bottom: $spacing-xs; }
.pb-sm { padding-bottom: $spacing-sm; }
.pb-md { padding-bottom: $spacing-md; }
.pb-lg { padding-bottom: $spacing-lg; }
.pb-xl { padding-bottom: $spacing-xl; }

// 文本对齐
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

// 文本颜色
.text-primary { color: $text-primary; }
.text-secondary { color: $text-secondary; }
.text-tertiary { color: $text-tertiary; }
.text-success { color: $success-color; }
.text-warning { color: $warning-color; }
.text-error { color: $error-color; }

// 字体大小
.text-xs { font-size: $font-size-xs; }
.text-sm { font-size: $font-size-sm; }
.text-base { font-size: $font-size-base; }
.text-lg { font-size: $font-size-lg; }
.text-xl { font-size: $font-size-xl; }

// 字体粗细
.font-normal { font-weight: $font-weight-normal; }
.font-medium { font-weight: $font-weight-medium; }
.font-bold { font-weight: $font-weight-bold; }

// 显示/隐藏
.hidden { display: none; }
.visible { display: block; }

// Flex布局
.flex { display: flex; }
.flex-center { @include flex-center; }
.flex-between { @include flex-between; }
.flex-column { @include flex-column; }

// 文本溢出
.ellipsis { @include text-ellipsis; }
.ellipsis-2 { @include text-ellipsis-multi(2); }
.ellipsis-3 { @include text-ellipsis-multi(3); }

/* ========== 通用卡片样式 ========== */
.card {
  @include card-base;
}

.card-hover {
  @include card-hover;
}

/* ========== 通用按钮样式 ========== */
.btn-primary {
  @include button-primary;
}

.btn-secondary {
  @include button-secondary;
}

/* ========== 通用动画类 ========== */
.fade-in {
  @include fade-in;
}

.slide-in-up {
  @include slide-in-up;
}

.scale-in {
  @include scale-in;
}

.pulse {
  @include pulse;
}

.float {
  @include float;
}

/* ========== 通用渐变背景 ========== */
.bg-gradient-primary {
  background: $primary-gradient;
}

.bg-gradient-blue {
  background: $gradient-blue;
}

.bg-gradient-green {
  background: $gradient-green;
}

.bg-gradient-orange {
  background: $gradient-orange;
}

.bg-gradient-pink {
  background: $gradient-pink;
}

.bg-gradient-gold {
  background: $gradient-gold;
}

/* ========== 通用渐变文字 ========== */
.text-gradient {
  @include gradient-text;
}

/* ========== 通用阴影 ========== */
.shadow-sm { box-shadow: $shadow-sm; }
.shadow-base { box-shadow: $shadow-base; }
.shadow-md { box-shadow: $shadow-md; }
.shadow-lg { box-shadow: $shadow-lg; }

/* ========== 安全区域适配 ========== */
.safe-area-bottom {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

.safe-area-top {
  padding-top: constant(safe-area-inset-top);
  padding-top: env(safe-area-inset-top);
}

